import styled from "styled-components";
import * as antd from "antd";

export const Avatar = styled(antd.Avatar)`
  display: block;
  margin-left: auto;
`;

export const Username = styled(antd.Dropdown)``;

export const Header = styled(antd.Layout.Header)`
  &.ant-layout-header {
    background: #fff;
    padding: 0;
    padding-right: 12px;

    display: flex;
    justify-content: flex-start;
    align-items: center;
    & ${Avatar} {
      display: block;
      margin-left: auto;
      margin-right: 8px;
    }

    & ${Username} {
      margin-right: 42px;
      font-size: 14px;
      cursor: pointer;
      min-width: 50px;
      text-align: center;
    }
  }
`;

export const UsernameText = styled.a``;
